<template>
    <div>
       <School ref="sch" id="sch"></School>
        <!-- ref获取sch组件实例对象//脚手架 -->

        <!-- ## ref属性

        1. 被用来给元素或子组件注册引用信息（id的替代者）
        2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
        3. 使用方式：
        1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
        2. 获取：```this.$refs.xxx``` -->


       <!-- ref操作元素,类似ID 即ID替代者-->
       <!-- 可以获取此元素内容 -->
       <h1 v-text="msg" ref="test"></h1>
   <button @click="show" ref="btn">点我展示上方元素</button>
    </div>
</template>
<script>
    import School from './compoents/School.vue'
    export default {
        name: 'App',
        components: {
            School
        },data() {
            return {
                msg:'使用vue脚手架'
            }
        },methods:{
            show(){
                console.log(this.$refs.test);
                console.log(this.$refs.btn);
                
                console.log(this.$refs.sch);
                // ref是组件实例对象
                console.log(document.getElementById('sch'));
                //id是html内容
            }
        }
    }
</script>                                                                  
<style>
</style>;